<template>
  <div>
    <!-- 文件夹 -->
    <div class="index">
      <div class="folder-list">
        <div
          :class="[folderId == item.id ? 'folder-selected' : 'folder']"
          v-for="(item, index) in folderList"
          :key="item.id"
          @dblclick="clickFolderItem(index, item.id)"
          @click="selectFolderItem(index, item.id)"
        >
          <comImgStack :imgList="item.imgList" width="100"></comImgStack>
          <p class="f-title">{{ item.folderName }}</p>
          <p class="f-num">{{ item.imgList.length }}个图片</p>
        </div>
      </div>
    </div>
    <hr>
    <!-- 图片 -->
    <div class="index">
      <div class="folder-list">
        <div
          class="folder"
          v-for="item in folderList[folderIndex].imgList"
          :key="item.id"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="item.link"
            :fit="'cover'"
          ></el-image>
          <p class="f-title">{{ item.name }}</p>
          <p class="f-num">{{ item.size }}kb</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import comImgStack from "@/wss/components/comImgStack.vue";
export default {
  name: "Index",

  components: { comImgStack },

  directives: {},

  data() {
    return {
      folderIndex: 0,
      folderId: "",
      showFolderList: true,
      showImgList: false,
      folderList: [
        {
          id: 10,
          folderName: "一带一路",
          imgList: [
            {
              link: "https://www.runoob.com/wp-content/uploads/2015/06/image_1c58eo46nj961rem1ipd1n631b0t1t-1.png",
              size: "100",
              name: "img1",
            },
          ],
        },
        {
          id: 1,
          folderName: "一带2路",
          imgList: [
            {
              link: "https://www.runoob.com/wp-content/uploads/2015/06/image_1c58eo46nj961rem1ipd1n631b0t1t-1.png",
              size: "100",
              name: "img1",
            },
            {
              link: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
              size: "100",
              name: "img2",
            },
          ],
        },
        {
          id: 2,
          folderName: "一带3路",
          imgList: [
            {
              link: "https://www.runoob.com/wp-content/uploads/2015/06/image_1c58eo46nj961rem1ipd1n631b0t1t-1.png",
              size: "100",
              name: "img1",
            },
            {
              link: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
              size: "100",
              name: "img2",
            },
            {
              link: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              size: "100",
              name: "img3",
            },
            {
              link: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
              size: "100",
              name: "img4",
            },
          ],
        },
        {
          id: 3,
          folderName: "一带4路",
          imgList: [],
        },
      ],
    };
  },

  mounted() {},

  methods: {
    clickFolderItem(i, id) {
      this.folderIndex = i;
      this.folderId = id;
      this.showFolderList = !this.showFolderList;
      this.showImgList = !this.showImgList;
    },
    selectFolderItem(i, id) {
      this.folderIndex = i;
      this.folderId = id;
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  margin: 10px;
  .folder-list {
    display: flex;
    flex-wrap: wrap;
    .folder,
    .folder-selected {
      text-align: center;
      padding: 20px;
      margin: 4px;
      p {
        margin: 0;
      }
      .f-title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0;
      }
      .f-num {
        font-size: 12px;
        color: rgb(158, 158, 158);
      }
    }
    .folder:hover,
    .folder-selected {
      border: 2px solid rgb(253, 150, 53);
      margin: 2px;
    }
  }
  .img-list {
    display: flex;
    .img {
      width: 130px;
      height: 100px;
    }
  }
}
</style>